<template>
    <div class="adoptManage">
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item><i class="el-icon-tickets"></i> 采纳管理</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <!-- 列表 -->
      <div class="container">
        <div class="handle-box">
          <div class="screenBox">
            <el-date-picker
              v-model="searchDate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              @change="operateSearchRecord"
            >
            </el-date-picker>
          </div>
          <div class="searchBox">
            <el-input class="handle-input" v-model.trim="searchText" placeholder="用户昵称或者动态内容" suffix-icon="el-icon-search" @keyup.enter.native="operateSearchRecord">
            </el-input>
          </div>
        </div>
        <div @change="swtichAdoptRecordOption">
          <el-radio v-model="matterType" label="3" border>反馈（{{feedbackTotal}}）</el-radio>
          <el-radio v-model="matterType" label="4" border>交流（{{exchangeTotal}}）</el-radio>
        </div>
        <div v-show="matterType === '3'">
          <el-table :data="feedbackList" style="width: 100%">
              <el-table-column align="center" width="80"></el-table-column>
              <el-table-column label="">
                <template slot-scope="scope">
                  <div class="tableScope" v-if="scope.row.voteType === '1'">
                    <div class="tableScopeFirst" v-if="scope.row.defaultText">{{scope.row.defaultText}}</div>
                    <div class="tableScopeFirst" v-if="scope.row.defaultImages">
                      <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultImages)" :key="'imageCell'+indexCell">
                        <img :src="itemCell">
                      </div>
                    </div>
                    <div class="tableScopeFirst" v-if="scope.row.defaultVideos">
                      <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultVideos)" :key="'videoCell'+indexCell">
                        <video :src="itemCell.url" :poster="itemCell.cover" controls v-if="indexCell === 0"></video>
                      </div>
                    </div>
                    <div class="tableScopeSecond">
                      <div class="tableScopeSecondCell">{{scope.row.nickName || '小悦老师...'}}</div>
                      <div class="tableScopeSecondCell">{{scope.row.createTime}}</div>
                      <div class="tableScopeSecondCell">评论：{{scope.row.forumComment || 0}}</div>
                      <div class="tableScopeSecondCell">点赞：{{scope.row.forumPraise || 0}}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="" align="center" width="300"></el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination @size-change="pagingSizeChange" @current-change="pagingCurrentChange" :current-page.sync="feedbackPage" :page-sizes="[10, 20, 30]"
                :page-size="10"
                layout="sizes, prev, pager, next, jumper"
                :total="feedbackTotal">
              </el-pagination>
            </div>
        </div>
        <div v-show="matterType === '4'">
          <el-table :data="exchangeList" style="width: 100%">
              <el-table-column align="center" width="80"></el-table-column>
              <el-table-column label="">
                <template slot-scope="scope">
                  <div class="tableScope" v-if="scope.row.voteType === '1'">
                    <div class="tableScopeFirst" v-if="scope.row.defaultText">{{scope.row.defaultText}}</div>
                    <div class="tableScopeFirst" v-if="scope.row.defaultImages">
                      <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultImages)" :key="'imageCell'+indexCell">
                        <img :src="itemCell">
                      </div>
                    </div>
                    <div class="tableScopeFirst" v-if="scope.row.defaultVideos">
                      <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultVideos)" :key="'videoCell'+indexCell">
                        <video :src="itemCell.url" :poster="itemCell.cover" controls v-if="indexCell === 0"></video>
                      </div>
                    </div>
                    <div class="tableScopeSecond">
                      <div class="tableScopeSecondCell">{{scope.row.nickName || '小悦老师'}}</div>
                      <div class="tableScopeSecondCell">{{scope.row.createTime}}</div>
                      <div class="tableScopeSecondCell">评论：{{scope.row.forumComment || 0}}</div>
                      <div class="tableScopeSecondCell">点赞：{{scope.row.forumPraise || 0}}</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="" align="center" width="300"></el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination @size-change="pagingSizeChange" @current-change="pagingCurrentChange" :current-page.sync="exchangePage" :page-sizes="[10, 20, 30]"
                :page-size="10"
                layout="sizes, prev, pager, next, jumper"
                :total="exchangeTotal">
              </el-pagination>
            </div>
        </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import Vue from 'vue'
  import { acquireAdoptFromGather } from '@/config/api'
  export default {
    name: 'adoptManage',
    data () {
      return {
        // 搜索文本
        searchText: '',
        _searchText: '',
        // 搜索时间
        searchDate: '',
        _searchDate: '',

        // 内容类型  1投票 2推荐(不用) 3反馈 4交流
        matterType: '3',
        // 反馈列表
        feedbackList: [],
        // 反馈总条数
        feedbackTotal: 0,
        // 反馈页码
        feedbackPage: 1,
        // 交流列表
        exchangeList: [],
        // 交流总条数
        exchangeTotal: 0,
        // 交流页码
        exchangePage: 1,



        // // 列表总页数
        // listTotal: 0,
        // 当前页面
        currentPage: 1,
        // 每页条数
        pageSize: 10,

        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        
      }
    },
    mounted (){
      const self = this;
      // 初始化 采纳管理界面
      self.initAdoptManageInterface()
    },
    methods: {
      // 初始化 采纳管理界面
      initAdoptManageInterface() {
        const self = this;
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      },
      // 获取 集合中的采纳记录
      async obtainAdoptFromGather() {
        const self = this;
        // 内容类型  1投票 2推荐(不用) 3反馈 4交流
        if (self.matterType === '3') {
          // 当前页面
          self.currentPage = self.feedbackPage
        }
        if (self.matterType === '4') {
          // 当前页面
          self.currentPage = self.exchangePage
        }
        self._searchText = self._searchText || ''
        self._searchDate = self._searchDate || ''
        const adoptInfo = await acquireAdoptFromGather(self.matterType, self.currentPage, self.pageSize, self._searchText, self._searchDate)
        console.log(adoptInfo, '获取 集合中的采纳记录')
        if (adoptInfo.status === 200) {
          // 反馈列表
          self.feedbackList = adoptInfo.data.feedbackList
          // 反馈总条数
          self.feedbackTotal = adoptInfo.data.feedbackTotal
          // 交流列表
          self.exchangeList = adoptInfo.data.exchangeList
          // 交流总条数
          self.exchangeTotal = adoptInfo.data.exchangeTotal
        }
      },
      // // 操作·筛选记录
      // async operateScreenRecord() {
      //   const self = this;
      //   console.log(self.matterType, self.searchText, self.searchDate, '....')
      //   // 内容类型  1投票 2推荐(不用) 3反馈 4交流
      //   if (self.matterType === '3') {
      //     // 反馈页码
      //     self.feedbackPage = 1
      //   }
      //   if (self.matterType === '4') {
      //     // 反馈页码
      //     self.exchangePage = 1
      //   }
      //   self._searchText = self.searchText
      //   // 获取 集合中的采纳记录
      //   self.obtainAdoptFromGather()
      // },
      // 操作·搜索记录
      async operateSearchRecord() {
        const self = this;
        console.log(self.matterType, self.searchText, self.searchDate, '....')
        // 内容类型  1投票 2推荐(不用) 3反馈 4交流
        if (self.matterType === '3') {
          // 反馈页码
          self.feedbackPage = 1
        }
        if (self.matterType === '4') {
          // 反馈页码
          self.exchangePage = 1
        }
        self._searchText = self.searchText
        self._searchDate = self.searchDate
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      },
      // 切换 采纳记录选项
      swtichAdoptRecordOption() {
        const self = this;
        // 搜索时间
        self.searchDate = ''
        // 搜索文本
        self.searchText = ''
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      },
      // 分页 页条数的变化
      pagingSizeChange(val) {
        const self = this;
        // 每页条数
        self.pageSize = val
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      },
      // 分页 页码的变化
      pagingCurrentChange(val) {
        const self = this;
        // 内容类型  1投票 2推荐(不用) 3反馈 4交流
        if (self.matterType === '3') {
          // 反馈页码
          self.feedbackPage = val
        }
        if (self.matterType === '4') {
          // 反馈页码
          self.exchangePage = val
        }
        // 获取 集合中的采纳记录
        self.obtainAdoptFromGather()
      }
    },
  }
</script>
<style lang="less">
  .adoptManage {
    .el-select {
      .el-input {
        width: 100px;
      }
    } 
  }
</style>
<style lang="less" scoped>
  @import 'adoptManage.less';
</style>
